<template>
  <div>
    <el-dropdown>
      <el-button type="text">
        <span class="hidden-md-and-down">你好，{{currentUserName}}</span>
        <i class="iconfont icon-wode"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <a href="#" style="color:white" @click="show">
            修改密码
          </a>
        </el-dropdown-item>
        <el-dropdown-item>
          <a href="#" style="color:white" @click="logout">
            退出系统
          </a>
        </el-dropdown-item>
        <!--<el-dropdown-item>-->
        <!--<a href="#" style="color:white">-->
        <!--数据统计-->
        <!--</a>-->
        <!--</el-dropdown-item>-->
        <!--<el-dropdown-item>-->
        <!--<a href="#" style="color:white">-->
        <!--系统设置-->
        <!--</a>-->
        <!--</el-dropdown-item>-->
      </el-dropdown-menu>
    </el-dropdown>

  </div>


</template>

<script>

  export default {
    name: "DropDown",
    props: {
      currentUserName: {
        type: String,
        default: 'zhangsan'
      }
    },
    methods: {
      /**
       * 登出
       */
      logout() {
        this.$store.commit("clearCurrentUser");
        this.$router.push("/login");
      },
      show() {
        this.$router.push("/dashboard/changePassword")
      },

    }
  }
</script>

<style scoped>
  .template {
    z-index: 999999!important;
  }
  /*设置dropdown的位置*/
  .el-dropdown {
    width: 150px;
    height: 60px;
    display: inline-block !important;
    text-align: center;
  }
  /*设置组件中按钮的样式*/
  .el-button {
    display: inline-block;
    height: 100%;
    color: #fff;
  }
  .el-button i {
    font-size: 24px;
    vertical-align: middle;
    margin-left: 5px;
  }
  /*设置组件中下拉框的样式*/
  .el-dropdown-menu {
    background-color: #6d7ee9;
    border: none;
    z-index: 10000 !important;
  }
  .el-dropdown-menu__item {
    color: white;
  }
  .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #3258c7;
    color: white;
  }


</style>

<style>

</style>